<?php $this -> load -> view('header'); ?>
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
	<?php //$this -> load -> view('sidebar'); ?>
	<!-- BEGIN PAGE -->
	<div class="page-content">
		<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<div id="portlet-config" class="modal hide">
			<div class="modal-header">
				<button data-dismiss="modal" class="close" type="button"></button>
				<h3>portlet Settings</h3>
			</div>
			<div class="modal-body">
				<p>
					Here will be a configuration form
				</p>
			</div>
		</div>
		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<!-- BEGIN PAGE CONTAINER-->
		<div class="container-fluid">
			<!-- BEGIN PAGE HEADER-->
			<div class="row-fluid">
				<div class="span12">
					<h3 class="page-title"> Daftar Laporan</h3>
					<?php $this -> load -> view('breadcrumb'); ?>
				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row-fluid">
				<div class="span12">
					<form action="" method="post" id="editReportFrm" class="form-horizontal">
					<div class="tabbable tabbable-custom boxless">
						<ul class="nav nav-tabs">
							<li class="active">
								<a class="advance_form_with_chosen_element" href="#tab_1" data-toggle="tab">Informasi Laporan</a>
							</li>
							<li >
								<a class="advance_form_with_chosen_element" href="#table" data-toggle="tab">Data Peserta</a>
							</li>					
							<li >
								<a class="advance_form_with_chosen_element" href="#attachmentTab" data-toggle="tab">Dokumen Pendukung</a>
							</li>							
							<li >
								<a class="advance_form_with_chosen_element" href="#chatTab" data-toggle="tab">Catatan/Komentar</a>
							</li>		
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="tab_1">
								<div class="portlet box green">
									<div class="portlet-title">
										<h4><i class="icon-reorder"></i>Formulir Laporan</h4>
										<div class="tools">
											<a href="javascript:;" class="collapse"></a>
											<a href="#portlet-config" data-toggle="modal" class="config"></a>
											<a href="javascript:;" class="reload"></a>
											<a href="javascript:;" class="remove"></a>
										</div>
									</div>
									<div class="portlet-body form">
										<!-- BEGIN FORM-->
										
											<input type="hidden" name="Berkas.id" value="<?php echo $id?>"/>
											<input type="hidden" name="Profile.id" value="<?php echo $selectedProfile?>"/>
											<input type="hidden" name="BerkasComment.text" id="berkasNote" value=""/>
											<input type="hidden" name="ProcedureStep.id" value="<?php echo $berkas->getInbox()->getProcedureStep()->getId();?>" />
											<h3 class="form-section">Report Info</h3>
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Desa</label>
														<div class="controls">
															<span class="text"><?php echo $berkas->getPerpustakaan()->getDesa()->getNama()?></span>															
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Doc Type</label>
														<div class="controls">
															<span class="text"><?php echo $berkas->getTipe()->getNama()?></span>															
														</div>
													</div>
												</div>
											</div>
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Library Name</label>
														<div class="controls">
															<span class="text"><?php echo $berkas->getPerpustakaan()->getNama()?></span>															
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<div class="control-group" style="display: none" id="jenisTrainingGroup">
														<label class="control-label">Training Type</label>
														<div class="controls">
															<span class="text"><?php if ($berkasTraining != null) echo $berkasTraining->getJenisTraining()->getNama()?></span>															
														</div>
													</div>
												</div>
											</div>
											
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Event Date</label>
														<div class="controls">
															<div class="input-append">
																<span class="text"><?php echo ($berkas!=NULL && $berkas->getEventDate() != NULL)? $berkas->getEventDate()->format('d-m-Y'):""; ?></span>                                    							
                                 							</div>															
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<!-- KOSONG-->													
												</div>
											</div>
											<div class="row-fluid">
											  	<div class="span12">
											  		<div class="control-group">
						                              <label class="control-label">Description</label>
						                              <div class="controls">
						                                 <span class="text"><?php echo ($berkas!=NULL)? $berkas->getDescription():""; ?></span>
						                              </div>
						                           </div>
											  	</div>
											</div>

											<!--/row-->
										<div id="detailSection" style="display: none">	
											<h3 class="form-section">Detail</h3>
											<div class="row-fluid" id="trainingDetailGroup" >
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Jumlah Staff/Non Staff</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" readonly="true" name="BerkasTraining.jmlStaff" id="participantTotalStaff" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlStaff():"";?>" />
															<span class="help-inline">Staff</span>
															
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Non Staff" readonly="true" name="BerkasTraining.jmlNonStaff" id="participantTotalNonStaff" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlNonStaff():"";?>" />
															<span class="help-inline">Non Staff</span>																														
														</div>
													</div>													
												</div>

												<!--/span-->
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Jumlah Gender</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Pria" name="BerkasTraining.jmlPria" readonly="true" id="participantTotalMale" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlPria():"";?>" />
															<span class="help-inline">Male</span>
															&nbsp;
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Wanita" name="BerkasTraining.jmlWanita" readonly="true" id="participantTotalFemale" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlWanita():"";?>" />
															<span class="help-inline">Female</span>																														
														</div>
													</div>													
												</div>
												<!--/span-->
											</div>
											<!--/row-->
											
											<div class="row-fluid" id="trainingDetailGroup2">
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Total</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" placeholder="total" name="total" readonly="true" id="participantTotal" value="<?php echo ($berkasTraining != NULL)? ($berkasTraining->getJmlPria() + $berkasTraining->getJmlWanita()) : "";?>">
															&nbsp; 																																													
														</div>
													</div>													
												</div>

												<!--/span-->
												<div class="span6">
													<!--<div class="control-group">
														<a href="#myModal3" role="button" class="btn btn-warning" data-toggle="modal" id="findCategory">Find</a>
													</div>-->													
												</div>
												<!--/span-->
											</div>
											<!--/row-->
										</div>
									</div>
								</div>
							</div>	
							<!-- tab table -->
							<div class="tab-pane" id="table">
								<div class="portlet box green" id="memberOfTrainingPanel" style="display: none">
									<div class="clearfix">
										<div class="btn-group">
											<button id="newParticipantBtn" class="btn green" onclick="addRow(event)">
											Member Of Training <i class="icon-plus"></i>
											</button>  
										</div>										
									</div>
									<div class="portlet-body form">
										<!-- BEGIN FORM-->
										<div class="row-fluid">
											<div class="span12 ">
												<div class="tab-pane" id="table">
													<div class="box-content">
														<table class="table table-striped table-hover table-bordered" id="myTable" >
															<thead>
																<tr>
																	<th>Name</th>
																	<th>Gender</th>
																	<th>Staff/Non Staff</th>
																	
																</tr>
															</thead>
															<tbody>
																
																<?php
																	if ($memberOfTraining != NULL && is_array($memberOfTraining)){
																		$idx = 0;
																		foreach ($memberOfTraining as $row){
																			if ($row->getGender() == "M"){
																				$isMaleChecked = "checked";
																				$isFemaleChecked = "";
																			} else {
																				$isMaleChecked = "";
																				$isFemaleChecked = "checked";
																			}
																			
																			if ($row->getStaff() == "S"){
																				$isStaffChecked = "checked";
																				$isNonStaffChecked = "";
																			} else {
																				$isStaffChecked = "";
																				$isNonStaffChecked = "checked";
																			}
																			echo '<tr><td><input class="m-wrap large" name="participantName[]" readonly value="'.$row->getName().'" type="text"></td><td><div class="control-group" style="margin-bottom: 5px;">'.
										                                             '<div class="controls" style="margin-left: 20px;">'.                                                
										                                                '<label class="radio">'.
										                                                '<input type="radio" disabled name="participantGender['.$idx.']" value="M" id="gender_' .$idx.'" '.$isMaleChecked.'/>'.
										                                                'Male &nbsp;'.
										                                                '</label>'.
										                                                '<label class="radio">'.
										                                                '<input type="radio" disabled name="participantGender['.$idx.']" value="F" id="gender2_' .$idx.'" '.$isFemaleChecked.'/>'.
										                                                'Female'.
										                                                '</label>'.  
										                                             '</div>'.
										                                          '</div></td><td><div class="control-group" style="margin-bottom: 5px;"><div class="controls" style="margin-left: 20px;">'.                                                
										                                                '<label class="radio">'.
										                                                '<input type="radio" disabled name="participantStaff['.$idx.']" value="S" id="staff_' .$idx.'" '.$isStaffChecked.'/>'.
										                                                'Staff &nbsp;'.
										                                                '</label>'.
										                                                '<label class="radio">'.
										                                                '<input type="radio" disabled name="participantStaff['.$idx.']" value="N" id="staff_' .$idx.'" '.$isNonStaffChecked.'/>'.
										                                                'Non Staff'.
										                                                '</label>'.  
										                                             '</div>'.
										                                          '</div></td></tr>';
																				  $idx++;
																		}
																	} 
																?>
																<!--<tr><td><input class="m-wrap large" name="BerkasTraining.participant.name[]" value="" type="text"></td><td><label class="radio"><input value="M" name="gender[]" type="radio">Male</label>&nbsp;<label class="radio"><input value="F" name="gender[]" type="radio">Female</label></td><td><label class="radio"><input value="Staff" name="staff[]" type="radio">Staff</label>&nbsp;<label class="radio"><input value="Non" name="staff[]" type="radio">Non Staff</label></td><td><a onclick="" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td></tr>-->	
																	<!--<tr>
																		<td><input type="text" class="m-wrap large" name="BerkasTraining.participant.name[]" value="" /></td>
																		<td><label class="radio"><input type="radio"  value="M" name="gender[]" >Male</label>&nbsp;<label class="radio"><input type="radio" value="F" name="gender[]" />Female</label></td>
																		<td><label class="radio"><input type="radio" value="Staff" name="staff[]" >Staff</label>&nbsp;<label class="radio"><input type="radio" value="Non" name="staff[]" />Non Staff</label></td>
																		<td><a onclick="" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td>
																	</tr>-->															
															</tbody>
														</table>
													</div>
												</div>
											</div>													
										</div>
									</div>
								</div>
							</div>	
							<!-- end table -->
							<div class="tab-pane" id="attachmentTab">
								<div class="portlet">
									<div class="portlet-title line">
										<h4><i class="icon-comments"></i>Attachments</h4>										
									</div>
									<div class="portlet-body">	
										<?php
											if ($berkas != NULL && $berkasAttachments != NULL){
												
												foreach ($berkasAttachments as $berkasAttachment){
													echo '<div class="row-fluid">
															<div class="span12 ">
																<div class="control-group">
																	<label class="control-label"></label>
																	<div class="controls">
																		<span class="text">'.$berkasAttachment->getPath().'
																		<a class="btn blue" href="'.base_url().'dashboard/viewBerkasAttachment/'.$berkasAttachment->getId().'" target="_blank">View</a></span>															
																	</div>
																</div>
															</div>
														</div>';
													
												}
											} 
										?>
																			
											
									</div>	
								</div>
							</div>			
							
							<div class="tab-pane" id="chatTab">
								<div class="portlet">
									<div class="portlet-title line">
										<h4><i class="icon-comments"></i>Comments</h4>
										<div class="tools">
											<a class="collapse" href="javascript:;"></a>
											<a class="config" data-toggle="modal" href="#portlet-config"></a>
											<a class="reload" href="javascript:;"></a>
											<a class="remove" href="javascript:;"></a>
										</div>
									</div>
									<div id="chats" class="portlet-body">
										<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 343px;">
											<div data-rail-visible1="1" data-always-visible="1" data-height="343px" class="scroller" style="overflow: hidden; width: auto; height: 343px;">
												<ul class="chats">
													
												<?php
													if ($berkasComments != null){
														foreach ($berkasComments as $berkasComment){
															$time = $berkasComment->getCreatedDate()->format('Y-m-d H:i:s'); 
															if ($berkasComment->getSender() == $userProfiles[0]->getUserId()){
																echo '<li class="in">
																		<div class="message">
																			<span class="arrow"></span>
																			<a class="name" href="#">'.$berkasComment->getSender().'</a>
																			<span class="datetime">at '.$time.'</span>
																			<span class="body">
																			'.$berkasComment->getText().'
																			</span>
																		</div>
																	</li>';			
															} else {
																echo '<li class="out">
																		<div class="message">
																			<span class="arrow"></span>
																			<a class="name" href="#">'.$berkasComment->getSender().'</a>
																			<span class="datetime">at '.$time.'</span>
																			<span class="body">'.$berkasComment->getText().'</span>
																		</div>
																	</li>'; 
															}
														}
													} ?>										
																
												</ul>
											</div>
											<div class="slimScrollBar ui-draggable" style="background: none repeat scroll 0% 0% rgb(161, 178, 189); width: 7px; position: absolute; top: 36.4667px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 187.041px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
											</div>
										</div>
										<!--<div class="chat-form">
											<div class="input-cont">   
												<input type="text" placeholder="Type a message here..." class="m-wrap">
												<textarea id="chatText"></textarea>											
											</div>
											<div class="btn-cont" > 
												<span class="arrow"></span>
												<a class="btn blue icn-only" href="javascript:;"><i class="icon-ok icon-white"></i></a>
											</div>
										</div>-->
									</div>
								</div>
							</div>
							<!-- END OF CHAT-->	
						</div>
					</div>
					<div class="form-actions">
						<?php
							if ($isEnabledSubmitBtn === TRUE){
									
						?>
						<button type="submit" class="btn blue" id="submitBtn">
							<i class="icon-ok"></i> Submit
						</button>
						<button type="submit" class="btn red" id="returnBtn">
							<i class="icon-ok"></i> Return
						</button>
						<?php
							} else {
									
								$cond = "REVIEW";
								$berkasId = $berkas->getId();
								$userId = $user->getUserId();
								$lastInboxActivity = $this -> em -> getRepository('\models\entities\BerkasActivity')->findUserActivityInbox($berkasId, $userId, $cond);
								if (count($lastInboxActivity) == 0){
									echo '<button type="submit" class="btn blue" id="submitBtn">
											<i class="icon-ok"></i> Review
									  </button>';	
								}
							} 
						?>
						<button type="button" class="btn" id="cancelBtn">
								Cancel
						</button>
					</div>
					</form>
					<!-- END FORM-->
				</div>
			</div>
			<!-- END PAGE CONTENT-->
		</div>
		<!-- END PAGE CONTAINER -->	
	</div>
	<!-- END PAGE -->
</div>	
<!-- END CONTAINER -->		

<div id="user" style="display: none"><?php echo $userProfiles[0]->getId();?></div>
<div id="berkasId" style="display: none"><?php echo $berkas->getId();?></div>
<div id="procedureStepId" style="display: none"><?php if ($berkas != NULL) echo $berkas->getInbox()->getProcedureStep()->getId(); ?></div>

<!-- DIALOG -->
<div id="myNote" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel1">Add Comment</h3>		
	</div>
<div class="modal-body">
	<div class="portlet-body fuelux">
		<textarea id="note"></textarea>	
	</div>	
</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		<button class="btn yellow" id="saveNote">Save</button>
	</div>
</div>
<!-- END DIALOG -->
<?php $this->load->view('footer')?>

<script>
	$(document).ready(function() {
		var tipeBerkas = "<?php echo $berkas->getTipe()->getId();?>";
		
		if (tipeBerkas == "TRAINING"){
			$('#jenisTrainingGroup').show();
		    $('#detailSection').show();	
		    $('#memberOfTrainingPanel').show();
		}
		
		/*
		$('#saveNote').click(function(){
			var textNote = $('#note').val();
			$('#berkasNote').val(textNote);
			$('#myNote').modal('hide');
			$('#editReportFrm').submit();
		}); */
		
		$('#saveNote').click(function(){
			var textNote = $('#note').val();
			if (textNote==''){
				alert('Harus input comment');
				return;
			} else {
				$('#berkasNote').val(textNote);
				$('#myNote').modal('hide');
				$('#editReportFrm').submit();
			}
		});
		
		
		var idx = 0;
		addRow = function (event){
			event.preventDefault();			
		}		
		
		$('#submitBtn').click(function(event){
			event.preventDefault();
			$('#editReportFrm').attr('action', "<?php echo base_url()?>inbox/submit");
			$('#myNote').modal('show');
	  		//$('#editReportFrm').attr('action', "<?php echo base_url()?>dashboard/submitReportVer").submit();
	  	});
	  	
	  	$('#returnBtn').click(function(event){
			/*  validasi */
			event.preventDefault();
			//var id = "<?php if ($berkas != NULL) echo $berkas->getId(); else echo "0"?>";
			$('#editReportFrm').attr('action', "<?php echo base_url()?>inbox/returnReportPost")
			$('#myNote').modal('show');
			//window.location = "<?php echo base_url()?>dashboard/returnReport/" + id;
	  		//$('#editReportFrm').attr('action', "<?php echo base_url()?>dashboard/returnReport").submit();
	  	});
	  	
	  	
	  	$('#cancelBtn').click(function(event){
	  		event.preventDefault();
	  		window.location = "<?php echo base_url().'inbox/profile/'.$selectedProfile?>";
	  	});
	  	
	  	 $('#distrik').on('change', function(e) {
		    // triggers when whole value changed
		    //alert('change');
		    	console.log("district value changed");
		    	var distrikId = $('#distrik').val();
		    	if (distrikId == "-1"){
		    		return;
		    	}
		    	// GET LIBRARY COMBOBOX 
		    	$.ajax({
				  url: "<?php echo base_url()?>/reference/perpustakaanByDistrik/"+distrikId,
				  success: function(data){
				  	 	/*if (data.error == 1){
				  			console.log("ERROR FETCHING DISTRIK");						
				  		} 				  		
				  	 	if (data.success == 1){
				  	 		
				  	 	} */
				  	 	$("#perpus").empty();
				  	 	$.each(data, function(key, val) {
							 $("#perpus").append($("<option></option>")
							 .attr("value", val.value).text(val.nama));
						});
						$('#perpus').trigger("liszt:updated");
				  },
				  dataType: "json"
				});
				// END GET LIBRARY COMBOBOX
		  });
		  
		  $('#tipeBerkas').on('change', function(e) {
		    	console.log("district value changed");
		    	if ($(this).val() == "TRAINING"){
		    		$('#jenisTrainingGroup').show();
		    		$('#detailSection').show();	
		    		$('#memberOfTrainingPanel').show();
		    		//$('#trainingDetailGroup').show();
		    		//$('#trainingDetailGroup2').show();
		    	} else {
		    		$('#jenisTrainingGroup').hide();
		    		$('#detailSection').hide();
		    		$('#memberOfTrainingPanel').hide();		    		
		    	}		   		 	
		  });	
		  
		  
		  <?php
		  		if ($berkas == NULL){
		  			//echo "$('#btnEditMember').prop('disabled', true);";	
		  		} 
		  ?>
	});
</script>

